<template>
  <component
    :is="type"
    v-bind="$props"
    class="decoration-box"
  >
    <slot />
  </component>
</template>

<script>
import dType1 from './types/d-type1.vue'
import dType2 from './types/d-type2.vue'
import dType3 from './types/d-type3.vue'
import dType4 from './types/d-type4.vue'
import dType5 from './types/d-type5.vue'
import dType6 from './types/d-type6.vue'
import dType7 from './types/d-type7.vue'
import dType8 from './types/d-type8.vue'
import dType9 from './types/d-type9.vue'
import dType10 from './types/d-type10.vue'
import dType11 from './types/d-type11.vue'
import dType12 from './types/d-type12.vue'
export default {
  name: 'HzxDecoration',
  components: {
    dType1,
    dType2,
    dType3,
    dType4,
    dType5,
    dType6,
    dType7,
    dType8,
    dType9,
    dType10,
    dType11,
    dType12
  },
  props: {
    type: {
      type: String,
      default: () => 'd-type1'
    },
    colors: {
      type: Array,
      default: () => undefined
    },
    width: {
      type: Number,
      default: undefined
    },
    height: {
      type: Number,
      default: undefined
    },
    reverse: {
      type: Boolean,
      default: undefined
    },
    dur: {
      type: Number,
      default: undefined
    },
    scanDur: {
      type: Number,
      default: undefined
    },
    haloDur: {
      type: Number,
      default: undefined
    }
  }
}
</script>

<style scoped="scoped" lang="less">
.decoration-box{
    overflow: hidden;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
